<div class="td-patient-reservation-detail">
    <mt-header fixed :title="doctor.DoctorName">
        <router-link to="tdPatientReservation" slot="left">
            <mt-button icon="back"></mt-button>
        </router-link>
    </mt-header>

    <div class="me-header">
        <div class="me-header-bg">
            <img v-if="doctor.IconPath" :src="doctor.IconPath" alt>
        </div>
        <div class="me-header-user-name">{{doctor.DoctorName}}</div>
        <div class="me-header-user-name">{{doctor.ProfessionalTitle}}&nbsp;线下咨询</div>
    </div>

    <div style="margin-top:15px;">
        <mt-cell title="就诊医院" is-link @click.native="showHospital=true">
            <span v-if="!params.HospitalID">请选择</span>
            <span v-if="params.HospitalID">{{hospitalList.find(i=>i.value===params.HospitalID).label}}</span>
        </mt-cell>
        <mt-cell title="病例所在地" is-link @click.native="showHospitalLocation=true">
            <span v-if="!params.RecordHospitalName">请选择</span>
            <span v-if="params.RecordHospitalName">{{hospitalLocationList.find(i=>i.value===params.RecordHospitalName).label}}</span>
        </mt-cell>
        <mt-cell title="是否怀孕">
            <div class="mint-radio-group">
                <el-radio-group size="mini" v-model="params.IsPregnancy">
                    <el-radio-button label="1">是</el-radio-button>
                    <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
            </div>
        </mt-cell>
    </div>

    <div class="reservation-date">
        <td-reservation-date v-if="load" :dateList="appointmentDateList" @updateEvent="update"></td-reservation-date>
    </div>

    <div class="date-select" v-if="selectDate.day!==undefined && selectDate.appointmentDateItem!==undefined">
        <h2>
            {{selectDate.AppointmentDate}}
            <span>(已约/可约)</span>
        </h2>
        <!--早上-->
        <div>
            <p>{{selectDate.timePeriod[0].hour}}</p>
            <p>
                <span class="tip-appointment" v-if="selectDate.appointmentDateItem.IsAM===0">
          <i class="fa fa-circle" aria-hidden="true"></i>可预约
        </span>
                <span class="tip-expiration" v-if="selectDate.appointmentDateItem.IsAM===1">
          <i class="fa fa-circle" aria-hidden="true"></i>已约满
        </span>
                <span class="tip-no-setting" v-if="selectDate.appointmentDateItem.IsAM===2">
          <i class="fa fa-circle" aria-hidden="true"></i>未设置
        </span>
            </p>
            <p>{{selectDate.appointmentDateItem.AMHad}}/{{selectDate.appointmentDateItem.AMNumber}}</p>
            <p>
                <el-button size="mini" type="primary" @click="btnReservation(selectDate,0);" v-if="selectDate.appointmentDateItem.IsAM!==2" :disabled="selectDate.appointmentDateItem.IsAMDisabled">预约</el-button>
            </p>
        </div>
        <!--下午-->
        <div>
            <p>{{selectDate.timePeriod[1].hour}}</p>
            <p>
                <span class="tip-appointment" v-if="selectDate.appointmentDateItem.IsPM===0">
          <i class="fa fa-circle" aria-hidden="true"></i>可预约
        </span>
                <span class="tip-expiration" v-if="selectDate.appointmentDateItem.IsPM===1">
          <i class="fa fa-circle" aria-hidden="true"></i>已约满
        </span>
                <span class="tip-no-setting" v-if="selectDate.appointmentDateItem.IsPM===2">
          <i class="fa fa-circle" aria-hidden="true"></i>未设置
        </span>
            </p>
            <p>{{selectDate.appointmentDateItem.PMHad}}/{{selectDate.appointmentDateItem.PMNumber}}</p>
            <p>
                <el-button size="mini" type="primary" @click="btnReservation(selectDate,1);" v-if="selectDate.appointmentDateItem.IsPM!==2" :disabled="selectDate.appointmentDateItem.IsPMDisabled">预约</el-button>
            </p>
        </div>
        <!--晚上-->
        <div>
            <p>{{selectDate.timePeriod[2].hour}}</p>
            <p>
                <span class="tip-appointment" v-if="selectDate.appointmentDateItem.IsNM===0">
          <i class="fa fa-circle" aria-hidden="true"></i>可预约
        </span>
                <span class="tip-expiration" v-if="selectDate.appointmentDateItem.IsNM===1">
          <i class="fa fa-circle" aria-hidden="true"></i>已约满
        </span>
                <span class="tip-no-setting" v-if="selectDate.appointmentDateItem.IsNM===2">
          <i class="fa fa-circle" aria-hidden="true"></i>未设置
        </span>
            </p>
            <p>{{selectDate.appointmentDateItem.NMHad}}/{{selectDate.appointmentDateItem.NMNumber}}</p>
            <p>
                <el-button size="mini" type="primary" @click="btnReservation(selectDate,2);" v-if="selectDate.appointmentDateItem.IsNM!==2" :disabled="selectDate.appointmentDateItem.IsNMDisabled">预约</el-button>
            </p>
        </div>
    </div>
    <el-alert title="请点击可用日期选择需要预约挂号的日期" v-if="selectDate.day===undefined && selectDate.appointmentDateItem===undefined" type="warning"></el-alert>

    <!-- 就诊医院 -->
    <mt-popup v-model="showHospital" position="bottom" class="mint-popup-box">
        <mt-header title="就诊医院">
            <mt-button slot="right" @click.native="showHospital=false">关闭</mt-button>
        </mt-header>
        <div class="list-box">
            <mt-radio :options="hospitalList" @change="getHospital" v-model="params.HospitalID"></mt-radio>
        </div>
    </mt-popup>
    <!-- 病例所在地 -->
    <mt-popup v-model="showHospitalLocation" position="bottom" class="mint-popup-box">
        <mt-header title="病例所在地">
            <mt-button slot="right" @click.native="showHospitalLocation=false">关闭</mt-button>
        </mt-header>
        <div class="list-box">
            <mt-radio :options="hospitalLocationList" @change="getHospitalLocation" v-model="params.RecordHospitalName"></mt-radio>
        </div>
    </mt-popup>
    <!--预约项目-->
    <mt-popup v-model="showAppointmentItem" position="bottom" class="mint-popup-box">
        <mt-header title="选择预约项目">
            <mt-button slot="right" @click.native="showAppointmentItem=false">关闭</mt-button>
        </mt-header>
        <div class="list-appointment">
            <h2 v-if="selectDate.AppointmentDate">{{selectDate.AppointmentDate}}</h2>
            <table>
                <tr v-for="(item,index) in appointmentItemList" :key="index">
                    <td width="35%">{{item.ItemName}}</td>
                    <td width="35%">{{utils$.subTransfer(item.ItemPrice)}}&nbsp;元</td>
                    <td width="30%">
                        <el-button size="mini" type="primary" @click="btnOrder(item);">预约下单</el-button>
                    </td>
                </tr>
            </table>
        </div>
    </mt-popup>
</div>